<template>
  <div class="ht-default-header-lang">
    <img class="lang-icon" src="~/assets/icons/icon_i18n.png" alt="icon_i18n" />
    <span class="lang-name">Zh</span>
    <img class="lang-arrow-down" src="~/assets/icons/delta.png" alt="" />
  </div>
</template>

<script setup lang="ts">
// import { useI18n } from 'vue-i18n'

// const { locale } = useI18n()
// const handleChange = () => {
//   const cookieLang = useCookie('lang')
//   cookieLang.value = locale.value
// }
</script>

<style lang="scss" scoped>
.ht-default-header-lang {
  display: flex;
  align-items: center;

  .lang-name {
    margin-left: 0.15rem;
    margin-right: 0.08rem;
    font-size: 0.2rem;
    font-family: Cera Pro, sans-serif;
    color: #111;
  }
  img {
    &.lang-icon {
      width: 0.21rem;
      height: 0.21rem;
    }
    &.lang-arrow-down {
      width: 0.08rem;
      height: 0.05rem;
    }
  }
}
</style>
